<template>
  <a-col class="text-type">
    <div class="label-type">
      <span>
        {{ stasticData.label }}
      </span>
      <span>
        <span :class="['iconfont', `icon-a-${stasticData.unitMap.key}`]"></span>
      </span>
    </div>
    <div class="stastic-num">
      <span>
        {{ stasticData.num }}
      </span>
      <span>
        {{ stasticData.unitMap.unit }}
      </span>
    </div>
    <div
      :class="[
        'growth-type',
        stasticData.growth === 0 && 'descend',
        stasticData.growth === 2 && 'rise',
        stasticData.growth === 1 && 'flat'
      ]"
    >
      <span> {{ stasticData.rate }} % </span>
    </div>
  </a-col>
</template>

<script>
export default {
  name: "StasticCategory",
  data() {
    return {};
  },
  props: {
    stasticData: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style scoped lang="less">
.label-type {
  font-size: 0.16rem;
  margin-bottom: 0.05rem;

  .icon-a-charging {
    color: #41f0ac;
  }

  .icon-a-oil {
    color: #ffc562;
  }
}

.stastic-num {
  font-size: 0.2rem;
  font-weight: bold;
  color: #181b39;
  margin-bottom: 10px;

  span:nth-child(2) {
    font-size: 0.13rem;
  }
}

.growth-type {
  font-size: 0.14rem;
}

.rise {
  color: #ff5a5a;
}

.descend {
  color: #40d79c;
}

.flat {
  color: #b7b7b7;
}
</style>
